<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#letterContent").keyup(function(){
			if($(this).val().length>600){
				alert("제한 글자수를 초과하였습니다.");
			}
		});
		$("#confirmBtn").click(function(){
			var letterTitle=$("#letterTitle").val();
			var letterContent=$("#letterContent").val();
			if(letterTitle==""){
				alert("제목을 입력하세요");
				return;
			}
			if(letterContent==""){
				alert("편지내용을 입력하세요");
				return;
			}
			if(letterContent.length>600){
				alert("제한 글자수를 초과하였습니다.");
				return;
			}
			$("#updateForm").submit();
		});
		$("#cancelBtn").click(function(){
			if(confirm("수정을 취소하시겠습니까?")){
				location.href="letter.do?command=letterList";
			}
		});
		$("#letterBackGround").change(function(){
			var name=$(this).val();
			if(name=="clean"){
				$("#image").html("");
				return;
			}
			$("#image").html("<img width='210' src='${initParam.root}/letter/"+name+"'>");
		});
	});
</script>
<table width="700" align="center" style="border-style:dotted; border-color:gray;">
	<tr>
		<td><form method="post" id="updateForm" action="${initParam.root}/letter.do">
<select id="letterBackGround" name="letterBackGround">
	<option value="clean"><font size="2"><b>편지지선택</b></font></option>
	<option value="letter1.jpg">snow pink</option>
	<option value="letter2.jpg">sky blue</option>
	<option value="letter3.jpg">classic brown</option>
</select> <font size="2"><b>편지지 수정을 반드시 확인해 주세요!</b></font>
<input type="hidden" name="command" value="updateLetter">
<input type="hidden" name="letterNo" value="${requestScope.letter.letterNo}">
<table>
	<tr>
		<td><font size="2"><b>제목 : </b></font></td><td><input type="text" name="letterTitle" id="letterTitle" maxlength="200" size="50" value="${requestScope.letter.letterTitle}"></td>
		<td id="image" rowspan="2" width="250" style="padding: 15px;"></td>
	</tr>
	<tr>
		<td colspan="2"><textarea cols="50" rows="20" name="letterContent" id="letterContent">${requestScope.letter.letterContent}</textarea></td>
	</tr>
</table>
</form></td>
	</tr>
	
</table><br><br>


<span style="margin-left: 350px;">
<img src="${initParam.root}/img/confirm_button.gif" id="confirmBtn">&nbsp;&nbsp;
<img src="${initParam.root}/img/cancel_btn.gif" id="cancelBtn"></span>

